Depurar aplicacion

Como depurar la aplicación android desde VSCode, tanto app Web como app Android.

Depurar con chrome

Aqui se explicará como depurar la aplicación cuando la ejecutamos en un dispositivo (emulador), y NO desde el navegador.

Una manera simple de depurar es usando chrome, una vez tenemos lanzado el emulador y nuestra aplicación podemos entrar en la siguiente dirección desde chrome:

chrome://inspect/#devices

Hacemos click en inspect en nuestro emulador en la lista de dispositivos que sale abajo

y desde ahí podremos ver la salida por consola de nuestra aplicación

Depurar con VSCode

Una manera mas potente de depurar y que nos permite poner breakpoints es usando VSCode, tenemos que seguir los siguientes pasos:

• Instalamos la extensión Android WebView Debugging en nuestro VSCode
• En el archivo .vscode/launch.json añadimos la siguiente configuración:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "android-webview",
      "request": "attach",
      "name": "Attach to Android WebView",
      "webRoot": "${workspaceFolder}/www",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${workspaceFolder}/*"
      }
    }
  ]
}

• En el apartado Build de la extensión de Ionic indicamos tipo development:

• Arrancamos la aplicación desde Run > Android:

• Desde el apartado de depuración de VSCode ejecutamos el target que hemos creado en el launch.json (Attach to Android WebView), y en las opciones que nos salen seleccionamos nuestro emulador y nuestra aplicación:


Una vez hecho esto ya podemos poner breakpoints en nuestra aplicación y el depurador parará cuando se alcancen, permitiendonos revisar el estado de variables y expresiones:

Para depurar una aplicación de Ionic cuando la ejecutamos desde el navegador, lo hacemos pulsando en la opción de la extensión de ionic:

Ionic | Android | Depuracion